<script setup defer async lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { formatDate,convertNumbers } from '@/utils/utils'
import { withdrawalRecord } from '@/api/user'
import { useSwipeHandlers } from '@/utils/useSwipeHandlers'

const { t } = useI18n()

const country=ref(1);
	const exchangeRate=ref(1);
	const symbol = ref('$')
interface DataItem {
  value: number
  status: number
  remark: string
  amount: number
  CreatedAt: string
  valueFee: number
}


const chineseToEnglishMap: { [key: string]: string } = {
  '-': 'Payment Platform - Proxy Payment Failed',
  
}


const translateToEnglish = (chineseText: string): string => {
  
  return chineseToEnglishMap[chineseText] || chineseText 
}

const baseData = reactive({
  condition: [0, 0],
  loading: false,
  page: 1,
  total: 0,
  typesList: ['All types', 'Applying', 'Rejected', 'Already arrived', 'fail', 'fail'],
  timeList: ['All time', 'Today', 'Yesterday', 'In the past seven days'],
  dataList: [] as DataItem[],
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
  isContinueGetList: true,
})

const uDropdownRef = ref<any>(null)

const getList = async () => {
  if (!baseData.isContinueGetList) return
  baseData.loading = true
  uni.showLoading({
    title: t('Loading'),
    icon: 'none',
  })
  let params: any = {
    page: baseData.page,
    change_type: baseData.condition[0],
    time_types: baseData.condition[1],
    pageSize: 20,
  }
  
  try {
    const res = await withdrawalRecord(params)
    if (res.code === 0) {
      baseData.total = res.data.total
      if (res.data.list.length > 0) {
        baseData.dataList = baseData.dataList.concat(res.data.list)
        baseData.page++
      }
      if (baseData.total <= (baseData.page - 1) * params.pageSize) {
        baseData.isContinueGetList = false
      }
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    }
  } catch (error) {
    console.error( error)
    uni.showToast({
      title: 'error',
      icon: 'none',
    })
  } finally {
    baseData.loading = false
    uni.hideLoading()
  }
}

const changTypes = (index: number) => {
  uDropdownRef.value?.close()
  baseData.page = 1
  baseData.dataList = []
  baseData.condition[0] = index
  baseData.isContinueGetList = true
  getList()
}

const changTime = (index: any) => {
  uDropdownRef.value?.close()
  baseData.condition[1] = index
  baseData.page = 1
  baseData.dataList = []
  baseData.isContinueGetList = true
  getList()
}

const handleScroll = () => {
  getList()
}

const leftClick = () => {
		window.top?.postMessage('/pages/user/index', window.location.origin)
		uni.navigateTo({
			url: '/pages/user/index',
		})
}


const getStatusText = (status: number) => {
  const statusMap: { [key: number]: string } = {
    1: 'Pending Review',
    2: 'Rejected',
    3: 'In Payment Process',
    4: 'Payment Successful',
    5: 'Failed',
    6: 'Payment Retry',
  }

  return statusMap[status] || 'Unknown state' 
}


const handleSwipeRight = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}

useSwipeHandlers(handleSwipeRight)

onMounted(() => {
  
  uni.setNavigationBarTitle({
    title: 'Studio ' + t('Earn money so easy') + '!', 
  })
  symbol.value = uni.getStorageSync('symbol') || '₹'; 
  		country.value=uni.getStorageSync('country') || 1;
  		exchangeRate.value=uni.getStorageSync('exchangeRate') || 1;
  getList()
})
</script>

<template>
  <view class="withdrawal-page-container">

	<up-navbar :title="t('Withdrawal details')" @click="leftClick" :autoBack="true">
						<template #left>
						  <view class="nav-back-btn">
						    <image class="back-icon" src="../../../static/img/left.png"></image>
						  </view>
						</template>
					</up-navbar>
    
    <view class="header-section">
      <view class="title-section">
        <text class="main-title">{{t('All withdrawal records')}}</text>
      </view>
      <view class="document-3d">
        <view class="document-body">
          <view class="document-header"></view>
          <view class="document-lines">
            <view class="line line-1"></view>
            <view class="line line-2"></view>
            <view class="line line-3"></view>
          </view>
        </view>
      </view>
    </view>

    
<!--    <view class="filter-section">
      <up-dropdown ref="uDropdownRef" active-color="#333" title-size="0.8rem" menu-icon="arrow-down-fill">
        <up-dropdown-item :title="t(baseData.typesList[baseData.condition[0]])">
          <view class="slot-content">
            <view class="up-text-center up-content-color up-m-t-20 up-m-b-20" style="background: #fff; padding: 0.4rem">
              <view
                v-for="(item, index) in baseData.typesList"
                :class="baseData.condition[0] == index ? 'citems' : 'items'"
                :key="index"
                @click="changTypes(index)"
              >
                {{ t(item) }}
              </view>
            </view>
          </view>
        </up-dropdown-item>
        <up-dropdown-item :title="t(baseData.timeList[baseData.condition[1]])" active-color="#333">
          <view class="slot-content">
            <view class="up-text-center up-content-color up-m-t-20 up-m-b-20" style="background: #fff; padding: 0.4rem">
              <view
                v-for="(item, index) in baseData.timeList"
                :class="baseData.condition[1] == index ? 'citems' : 'items'"
                :key="index"
                @click="changTime(index)"
              >
                {{ t(item) }}
              </view>
            </view>
          </view>
        </up-dropdown-item>
      </up-dropdown>
    </view>
    -->
    
    <view class="withdrawal-list-section">
      <view class="list-container">
        <up-list @scrolltolower="handleScroll" style="height: 100%">
          <up-list-item v-for="(item, index) in baseData.dataList" :key="index">
            <view class="withdrawal-item">              
              <view class="item-content">
                <view class="withdrawal-info">
                  <view class="amount-section">
                    <text class="amount-value">{{symbol}} {{ convertNumbers(item.value,exchangeRate) }}</text>
                  </view>
                  <view class="status-section">
                    <text class="status-label">{{ t('remark') }}:</text>
                    <text class="status-text">{{ getStatusText(item.status) }}</text>
                    <text class="remark-text">({{ translateToEnglish(item.remark) }})</text>
                  </view>
                </view>
                
                <view class="item-details">
                  <view class="detail-row">
                    <text class="detail-time">{{ formatDate(item.CreatedAt) }}</text>
                    <view class="detail-amount">
                      <text class="fee-label">-{{convertNumbers( item.valueFee + item.value,exchangeRate) }}</text>
                      <text class="currency-symbol">{{symbol}}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </up-list-item>
          
          <view class="list-end-text" v-show="!baseData.loading && baseData.dataList.length > 0">
            {{ t('Reached the End') }}
          </view>
          
          <view class="list-loading-text" v-show="baseData.loading">
            {{ t('Loading') }}
          </view>
          
          <view class="empty-state" v-show="baseData.dataList.length === 0 && !baseData.loading">
            <view class="empty-icon">
              <img src="@/static/img/empty120.png"/>
            </view>
            <text class="empty-text">{{ t('No Data') }}</text>
          </view>
        </up-list>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.withdrawal-page-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #e8f5e8 0%, #ffffff 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
}

.header-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 30px 30px;
  padding-top: 50px;
  
  .title-section {
    flex: 1;
    
    .main-title {
      display: block;
      font-size: 20px;
      font-weight: 900;
      color: #000;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
  }
  
  .document-3d {
    width: 120px;
    height: 80px;
    position: relative;
    
    .document-body {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-radius: 8px;
      position: relative;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
      border: 1px solid rgba(0, 0, 0, 0.1);
      
      .document-header {
        position: absolute;
        top: 12px;
        left: 12px;
        right: 12px;
        height: 8px;
        background: #4CAF50;
        border-radius: 4px;
      }
      
      .document-lines {
        position: absolute;
        top: 30px;
        left: 12px;
        right: 12px;
        
        .line {
          height: 3px;
          background: #dee2e6;
          border-radius: 2px;
          margin-bottom: 6px;
          
          &.line-1 {
            width: 80%;
          }
          
          &.line-2 {
            width: 60%;
          }
          
          &.line-3 {
            width: 70%;
          }
        }
      }
    }
  }
}

.filter-section {
  padding: 0 30px 20px;
  
  ::v-deep .u-dropdown {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .u-dropdown__content {
      height: 94vh !important;
    }
    
    .u-m-t-20,
    .up-m-t-20 {
      margin-top: 0px !important;
    }
  }
}

.withdrawal-list-section {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 0 10px 10px;
}

.list-container {
  width: 100%;
  height: 100%;
}

.withdrawal-item {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 6px;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  

}



.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.withdrawal-info {
  margin-bottom: 12px;
}

.amount-section {
  margin-bottom: 8px;
}

.amount-value {
  font-size: 24px;
  color: #333;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.status-section {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.status-label {
  color: #333;
  font-weight: 500;
}

.status-text {
  color: #4CAF50;
  font-weight: 600;
  margin: 0 6px;
}

.remark-text {
  color: #666;
  font-weight: 400;
}

.item-details {
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-time {
  font-size: 13px;
  color: #666;
  font-weight: 400;
}

.detail-amount {
  display: flex;
  align-items: baseline;
}

.fee-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.currency-symbol {
  font-size: 12px;
  color: #666;
  margin-left: 4px;
}

.list-end-text,
.list-loading-text {
  text-align: center;
  padding: 30px 0;
  font-size: 14px;
  color: #666;
  font-weight: 400;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  margin: 20px;

  .empty-icon {
    margin-bottom: 20px;
    opacity: 0.4;
    color: #64748b;
    filter: grayscale(1);
    
    img {
      width: 60px;
      height: 60px;
    }
  }

  .empty-text {
    font-size: 16px;
    color: #64748b;
    font-weight: 500;
    letter-spacing: 0.5px;
  }
}


::v-deep .up-list-item {
  margin-bottom: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;

  .u-list-item {
    padding: 0;
    background: transparent;

    .u-list-item__content {
      padding: 0;
      
      .u-list-item__content__main {
        padding: 0;
        
        .u-list-item__content__main__desc {
          padding: 0;
          margin: 0;
        }
      }
    }
  }
}


@media (max-width: 750rpx) {
  .withdrawal-list-section {
    padding: 0 20px 20px;
  }
  
  .header-section {
    padding: 30px 20px 20px;
  }
  
  .filter-section {
    padding: 0 20px 15px;
  }
}
</style>